<template>
    <div class="cateen-list" v-loading="loading">
        <div class="food-header">
            <span @click="preWeek"><i class="el-icon-arrow-left"></i>上一周</span>
            <div>
                <p>第 {{weekNumber}} 周菜单</p>
                <p>（{{weekDay[0]}} - {{weekDay[6]}}）</p>
            </div>
            <span @click="nextWeek"><i class="el-icon-arrow-right"></i>下一周</span>
        </div>

        <div class="food-banner">
            <div>
                <span 
                    v-for="(item, inx) in weekObj" 
                    class="week" 
                    :key="inx" 
                    :class="weekActive === inx ? 'week-active' : ''"
                    @click="changeWeek(inx)">{{item.name}}</span>
            </div>
            <div>
                <div v-for="(item, inx) in mealList" :key="inx">
                    <span 
                        class="item-text" 
                        :class="mealIndex === inx ? 'item-text-active' : ''"
                        @click="changeMealActive(inx)"><img v-if="mealIndex === inx" :src="mealImgactive[inx]" /><img v-else :src="mealImg[inx]" /><span>{{item.name}}</span></span>
                </div>
            </div>
        </div>

        <div class="food-container">
            <template v-if="dayList.length > 0">
                <div class="food-box" v-for="(item, inx) in dayList" :key="inx">
                    <img :src="BASE_URL + item.path" alt="食物图片">
                    <div class="box-item">
                        <span>{{item.name}}</span>
                        <span>￥<span>{{item.price}}</span></span>
                    </div>
                </div>
            </template>
            <div v-else class="no-food">
                <img src="./../../../assets/images/canteen/no-food.png" alt="暂无菜单">
            </div>
        </div>

        <div class="pageBox" v-if="showPageBox">
            <el-pagination
                background
                layout="prev, pager, next"
                @current-change="changePage"
                :page-size="listParam.pageSize"
                :current-page="listParam.pageIndex"
                :total="toltalNumber">
            </el-pagination>
        </div>
        <div v-if="listData.length > 0" class="screening-mode" @click="setMode"></div>

        <el-dialog
            class="screeing-meal"
            title="选择投屏的餐次"
            :close-on-click-modal="false"
            :close-on-press-escape="false"
            :visible.sync="mealVisible"
            width="550px">
            <el-radio-group v-model="mealId" class="screeing-meal-radio">
                <el-radio v-for="(item, inx) in mealList.filter(item => item.id !== 0)" :key="inx" :label="inx">{{item.name}}</el-radio>
            </el-radio-group>

            <div>
                <el-button type="primary" plain @click="mealVisible = false">取消</el-button>
                <el-button type="primary" @click="showMeal">确定</el-button>
            </div>
        </el-dialog>

        <div class="screening-food" v-if="screeningVisible">
            <div id="dropOut" class="drop-out" @click="dropOut"></div>
            <div class="screening-list" :class="Math.ceil(screenList.length / 4) > 1 ? 'screening-list-carcous' : ''">
                <div v-for="(item, inx) in screenActiveList" :key="inx" class="list-content" :class="'list-content-' + screenActiveList.length">
                    <img :src="BASE_URL + item.path">
                    <div class="img-text">
                        <span>{{item.name}}</span>
                        <span>￥<span>{{item.price}}</span></span>
                    </div>
                </div>
            </div>

            <ul class="cacrouse-btn" v-if="Math.ceil(screenList.length / 4) > 1">
                <li 
                    v-for="(item, inx) in Math.ceil(screenList.length / 4)" 
                    :class="inx == activeIndex ? 'btn-active' : ''" 
                    :key="inx"
                    @click="changeImgPage(inx)">
                </li>
            </ul>
        </div>
    </div>
</template>

<script>
import mealImg0 from './../../../assets/images/canteen/food.png';
import mealImg1 from './../../../assets/images/canteen/breakfast.png';
import mealImg2 from './../../../assets/images/canteen/lunch.png';
import mealImg3 from './../../../assets/images/canteen/tomato.png';
import mealImg4 from './../../../assets/images/canteen/finsh.png';
import mealImg5 from './../../../assets/images/canteen/cake.png';
import mealImgactive0 from './../../../assets/images/canteen/food-active.png';
import mealImgactive1 from './../../../assets/images/canteen/breakfast-active.png';
import mealImgactive2 from './../../../assets/images/canteen/lunch-active.png';
import mealImgactive3 from './../../../assets/images/canteen/tomato-active.png';
import mealImgactive4 from './../../../assets/images/canteen/fish-active.png';
import mealImgactive5 from './../../../assets/images/canteen/cake-active.png';

export default {
    data() {
        return {
            loading: false,
            showPageBox: false,
            mealVisible: false, // 显示投屏
            screeningVisible: false,
            mealId: 0,
            activeIndex: 0,
            toltalNumber: 0,
            mealIndex: 0, // 餐次选中
            weekNumber: 1, // 当前周
            weekActive: 0, // 星期几索引
            carouselTime: null,
            dropTime: null,
            lastWeek: null, // 上一周的日期
            nextWeekTime: null, // 下一周日期
            screenList: [],
            listData: [],
            weekDay: [], // 当前周日期
            weekObj: [], // 星期信息
            mealImg: [mealImg0, mealImg1, mealImg2, mealImg3, mealImg4, mealImg5],
            mealImgactive: [mealImgactive0, mealImgactive1, mealImgactive2, mealImgactive3, mealImgactive4, mealImgactive5],
            listParam: {
                pageSize: 6,
                pageIndex: 1
            }
        }
    },
    created() {
        this.getWeek();
    },
    computed: {
        /**
         * 当前投屏页面的图片
         */
        screenActiveList() {
            let temp = [];

            temp = this.screenList.filter((item, inx) => {
                return inx >= this.activeIndex * 4 && inx < (this.activeIndex + 1) * 4;
            })

            return temp;
        },
        /**
         * 当前星期几的数据
         */
        dayList() {
            let temp = [];

            if (this.mealIndex === 0) {
                this.listData.forEach(item => {
                    item.menu.forEach(val => {
                        temp.push(val);
                    })
                })
            } else {
                temp = this.listData[this.mealIndex - 1].menu;
            }

            this.showPageBox = temp.length > 6 ? true : false;
            this.toltalNumber = temp.length;

            temp = temp.filter((item, inx) => {
                return inx >= (this.listParam.pageIndex - 1) * this.listParam.pageSize && inx < this.listParam.pageIndex * this.listParam.pageSize;
            })

            return temp;
        },
        /**
         * 获取餐次名称
         */
        mealList() {
            let temp = [{id: 0, name: '全部'}];

            !is_empty(this.listData) && this.listData.forEach(item => {
                temp.push({
                    id: item.id,
                    name: item.name
                })
            })

            return temp;
        }
    },
    methods: {
        /**
         * 获取当前周
         */
        getWeek(val) {
            let weekTime = val ? val : new Date();
            let weekYear = weekTime.getFullYear();
            let weekMonth = weekTime.getMonth() + 1;
            let weekDate = weekTime.getDate();
            this.weekActive = 0;
            this.mealIndex = 0;
            this.weekObj = [];

            this.weekNumber = getWeekNumber(weekYear, weekMonth, weekDate);
            this.weekDay = getWeekDay(weekYear + '-' + weekMonth + '-' + weekDate);
            this.weekDay.forEach(item => {
                this.weekObj.push({
                    time: item,
                    name:  "星期" + "天一二三四五六".charAt(new Date(item).getDay())
                })
            })

            this.getList();
        },
        /**
         * 菜单列表
         */
        getList() {
            this.loading = true;

            const success = (res => {
                this.loading = false;
                this.listParam.pageIndex = 1;
                this.listData =  res.data.menus ? res.data.menus : [];
            })
            const params = {
                day_time: this.weekDay[this.weekActive]
            }

            this.$ajax({
                url: 'api/carte/single',
                method: 'get',
                params,
                func: {success: success}
            });
        },
        /**
         * 上一周
         */
        preWeek() {
            let today = this.lastWeek ? this.lastWeek : new Date();
            let t = today.getTime() - 7 * 1000 * 60 * 60 * 24;
            this.lastWeek = this.nextWeekTime = new Date(t);

            this.getWeek(this.lastWeek);
        },
        /**
         * 下一周
         */
        nextWeek() {
            let today = this.nextWeekTime ? this.nextWeekTime : new Date();
            let t = today.getTime() + 7 * 1000 * 60 * 60 * 24;
            this.lastWeek = this.nextWeekTime = new Date(t);

            this.getWeek(this.nextWeekTime);
        },
        /**
         * 切换星期几
         * @param {Number} inx 星期索引
         */
        changeWeek(inx) {
            this.weekActive = inx;
            this.mealIndex = 0;

            this.getList();
        },
        /**
         * 切换餐次
         */
        changeMealActive(inx) {
            this.mealIndex = inx;
            this.listParam.pageIndex = 1;
        },
        /**
         * 鼠标移动时显示，鼠标静止3S后隐藏
         */
        dropHidden() {
            clearTimeout(this.dropTime);
            this.dropTime = null;
            let self = this;
            let dom = document.querySelector('#dropOut').classList;
            dom.remove('drop-out-hidden');

            this.dropTime = setTimeout(() => {
                dom.add('drop-out-hidden');
            }, 3000);
        },
        setListener() {
            document.querySelector('.screening-food').addEventListener('mousemove', this.dropHidden);
        },
        /**
         * 显示餐次投屏
         */
        setMode() {
            this.mealVisible = true;
            this.$nextTick(() => {
                let dom = document.querySelector('.screeing-meal-radio');
                let dom1 = document.querySelector('.screeing-meal .el-dialog__body');

                if (dom.offsetHeight > 180) {
                    dom1.classList.add('screeing-meal-radio-left');
                } else {
                    dom1.classList.remove('screeing-meal-radio-left');
                }
            })
        },
        /**
         * 显示投屏模式
         */
        showMeal() {
            clearTimeout(this.carouselTime);
            this.carouselTime = null;
            this.mealVisible = false;
            this.screeningVisible = true;
            this.activeIndex = 0;
            document.body.style.overflow = 'hidden';
            let temp = [];

            if (this.mealId === 0) {
                this.listData.forEach(item => {
                    item.menu.forEach(val => {
                        temp.push(val);
                    })
                })
            } else {
                temp = this.listData[+this.mealId - 1].menu;
            }

            this.screenList = temp;

            this.carousel();
            this.$nextTick(() => {
                this.dropHidden();
                this.setListener();
            })
        },
        /**
         * 投屏轮播
         */
        carousel() {
            let self = this;

            this.carouselTime = setTimeout(() => {
                let num = Math.ceil(self.screenList.length / 4);

                if (this.activeIndex == (num -1)) {
                    this.activeIndex = 0;
                } else {
                    ++this.activeIndex;
                }

                this.carousel();
            }, 5000);
        },
        /**
         * 切换投屏分页
         * @param {Number} inx 分页下标
         */
        changeImgPage(inx) {
            clearTimeout(this.carouselTime);
            this.carouselTime = null;
            this.activeIndex = inx;

            this.carousel();
        },
        /**
         * 退出投屏
         */
        dropOut() {
            clearTimeout(this.carouselTime);
            clearTimeout(this.dropTime);
            this.carouselTime = null;
            this.dropTime = null;
            document.querySelector('.screening-food').removeEventListener('mousemove', this.dropHidden);
            this.activeIndex = 0;
            this.mealId = 0;
            this.screeningVisible = false;
            document.body.style.overflow = 'auto';
        },
        /**
         * 切换分页
         * @param {Number} val 分页
         */
        changePage(val) {
            this.listParam.pageIndex = val;
        }
    },
}
</script>

<style lang="scss">
.cateen-list {
    position: relative;
    margin: auto; 
    padding: 30px 0 40px;
    width: 1200px;
    min-height: calc(100vh - 124px);
    box-sizing: border-box;

    .food-header {
        position: relative;
        margin-bottom: 20px;
        height: 140px;
        background: url('./../../../assets/images/canteen/banner.png') no-repeat;
        box-sizing: border-box;

        >span {
            position: absolute;
            top: 58px;
            padding: 6px 12px;
            font-size: 14px;
            color: #000000;
            opacity: 0.43;
            background: #FFFFFF;
            border-radius: 13px;
            cursor: pointer;
            transition: all 0.5s linear;
        }

        >span:nth-of-type(1) {
            left: 40px;
        }

        >span:nth-of-type(2) {
            right: 40px;
        }

        >span:hover {
            opacity: 1;
            transition: all 0.5s linear;
        }

        >div {
            position: absolute;
            top: 26px;
            left: 479px;
            width: 242px;
            height: 100px;
            background: #fff;
            border-radius: 2px;
            box-sizing: border-box;

            p:first-child {
                margin: 16px auto;
                font-size: 28px;
                color: #000000;
                line-height: normal;
                text-align: center;
                letter-spacing: 2px;
            }

            p:last-child {
                font-size: 12px;
                color: #666666;
                text-align: center;
                letter-spacing: 0.86px;
            }
        }
    }

    .food-banner {
        height: 160px;
        background: #fff;
        border-radius: 3px;
        box-shadow: 0 1px 1px 0 rgba(0,0,0,0.10);
        box-sizing: border-box;

        >div:first-child {
            margin: auto 20px;
            border-radius: 3px 3px 0px 0px;
            box-shadow: 0 1px 1px 0 rgba(0,0,0,0.10);

            .week {
                display: inline-block;
                margin: auto 30px;
                padding-top: 20px;
                padding-bottom: 20px;
                font-size: 14px;
                color: #666666;
                line-height: normal;
                cursor: pointer;
            }

            .week:hover {
                color: #348EFC;
            }

            .week-active {
                font-weight: bold;
                color: #348EFC;
                border-bottom: 4px solid #348EFC;
            }
        }

        >div:last-child {
            position: relative;
            display: flex;
            flex-wrap: wrap;
            margin: auto 28px;
            margin-top: 40px;

            >div {
                position: relative;
                margin-bottom: 10px;
            }

            .item-text {
                font-size: 14px;
                color: #666;
                line-height: normal;
                cursor: pointer;

                img {
                    margin-top: -6px;
                    margin-left: 30px;
                    margin-right: 12px;
                    vertical-align: middle;
                }

                span {
                    margin-right: 30px;
                }
            }

            .item-text-active {
                color: #348EFC;
                font-weight: bold;
            }

            .item-text:before,
            .item-text-active:before,
            .item-text:after,
            .item-text-active:after {
                content: '';
                position: absolute;
                top: -4px;
                width: 1px;
                height: 28px;
                background: #ddd;
                transform: rotate(20deg);
            }

            .item-text-active:before,
            .item-text-active:after {
                background: #333;
                transform: rotate(20deg) translate3d(0, 0, 0);
                z-index: 1;
            }

            .item-text:hover {
                color: #348EFC;
            }
        }
    }

    .food-container {
        display: flex;
        flex-wrap: wrap;
        margin: 20px auto;

        .no-food {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 100%;
            height: 400px;
            border-radius: 3px;
            background: #fff;
            box-shadow: 0 1px 1px 0 rgba(0,0,0,0.10);
            
            img {

            }
        }

        .food-box {
            margin-right: 15px;
            margin-bottom: 20px;
            width: 390px;
            height: 300px;
            background: #FFFFFF;
            border-radius: 4px;
            box-shadow: 0 1px 1px 0 rgba(0,0,0,0.10);
            box-sizing: border-box;

            img {
                width: 390px;
                height: 220px;
                object-fit: contain;
            }

            .box-item {
                display: flex;
                align-items: center;
                justify-content: space-between;
                padding: 28px 20px 23px;
                line-height: normal;

                >span:first-child {
                    font-size: 18px;
                    color: #000000;
                }

                >span:last-child {
                    font-size: 18px;
                    color: #D9854D;

                    span {
                        font-size: 24px;
                        color: #D77D41;
                    }
                }
            }
        }

        .food-box:nth-child(3n) {
            margin-right: 0;
        }
    }

    .pageBox {
        display: inline-block;
        background: #fff;

        .el-pagination.is-background .btn-prev,
        .el-pagination.is-background .btn-next,
        .el-pagination.is-background .el-pager li {
            background: #fff;
        }

        .el-pagination.is-background .el-pager .active {
            background: #409EFF;
        }
    }

    .screening-mode {
        position: fixed;
        right: 56px;
        bottom: 48px;
        width: 88px;
        height: 88px;
        text-align: center;
        background: url('./../../../assets/images/canteen/screening.png') no-repeat;
        background-size: 100% 100%;
        transition: all 0.5s linear;
        cursor: pointer;
    }

    .screening-mode:hover {
        background: url('./../../../assets/images/canteen/screening-active.png') no-repeat;
        background-size: 100% 100%;
        transition: all 0.5s linear;
    }

    .screeing-meal {
        .el-dialog__header {
            padding: 0 0 0 20px;
            height: 36px;
            line-height: 36px;
            background: #348EFC;

            >span {
                font-size: 14px;
                color: #FFFFFF;
            }

            button {
                top: 10px;

                i {
                    color: #fff;
                }
            }
        }

        .el-dialog__body {
            padding: 0 30px 30px;
            text-align: center;

            >div:first-child {
                padding: 70px 0 60px;
            }

            >div:last-child {
                text-align: center;

                button {
                    padding: 7px 19px;
                }
            }

            .el-radio-group {
                label {
                    margin-bottom: 20px
                }
            }
        }

        .screeing-meal-radio-left {
            text-align: left;
        }
    }

    .screening-food {
        position: fixed;
        top: 0;
        left: 0;
        width: 100vw;
        height: 100vh;
        background: #EFFAFF;
        z-index: 10;

        .drop-out {
            position: fixed;
            top: 40px;
            right: 42px;
            width: 88px;
            height: 88px;
            text-align: center;
            background: url('./../../../assets/images/canteen/drop.png') no-repeat;
            background-size: 100% 100%;
            transition: all 0.5s linear;
            opacity: 1;
            cursor: pointer;
        }

        .drop-out:hover {
            background: url('./../../../assets/images/canteen/drop-active.png') no-repeat;
            background-size: 100% 100%;
            transition: all 0.5s linear;
        }

        .drop-out-hidden {
            opacity: 0;
            transition: all 0.5s linear;
        }

        .cacrouse-btn {
            display: flex;
            align-items: center;
            justify-content: center;
            height: 40px;

            li {
                margin: 8px;
                padding: 5px;
                background: #626262;
                border-radius: 50%;
                cursor: pointer;
            }

            li:not(.btn-active):hover {
                background: linear-gradient(to right, #CDCDCD, #626262);
            }

            .btn-active {
                background: #CDCDCD;
            }
        }

        .screening-list {
            display: flex;
            align-items: center;
            flex-wrap: wrap;
            margin: auto;
            height: 100%;
            max-width: 1268px;

            .list-content {
                img {
                    width: 100%;
                }

                .img-text {
                    display: flex;
                    align-items: center;
                    justify-content: space-between;
                    padding: 0 46px;
                    height: 70px;
                    line-height: normal;
                    background: #fff;

                    >span:first-child {
                        font-size: 30px;
                        color: #000000;
                    }

                    >span:last-child {
                        font-size: 20px;
                        color: #D9854D;

                        span {
                            font-size: 40px;
                            color: #D77D41;
                        }
                    }
                }
            }

            .list-content-1 {
                width: 100%;
            }

            .list-content-2 {
                width: calc(50% - 10px);
            }

            .list-content-2:nth-child(2n) {
                margin-left: 20px;
            }

            .list-content-3 {
                width: calc(50% - 10px);
            }

            .list-content-3:nth-child(2n) {
                margin-left: 20px;
            }

            .list-content-4 {
                width: calc(50% - 10px);
            }

            .list-content-4:nth-child(2n) {
                margin-left: 20px;
            }
        }

        .screening-list-carcous {
            height: calc(100% - 40px);
        }
    }
}
</style>